<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bx {
        margin: 0 20px;
        float: left;
        width: 100px;
        height: 100px;
    }

    .a {
        background-color: pink;
    }

    .b {
        background-color: rgb(44, 207, 98);
    }

    .c {
        background-color: rgb(30, 6, 10);
    }
</style>

<body>
    <div class="bx a">1</div>
    <div class="bx b">2</div>
    <div class="bx c">3</div>
    <script>
        const a = document.querySelector('.bx.a')
        const b = document.querySelector('.bx.b')
        const c = document.querySelector('.bx.c')
        document.addEventListener('click', function () {
            alert('我是你爸爸')
        })

        a.addEventListener('click', function () {
            alert('我是粉色')
        })
        b.addEventListener('click', function () {
            alert('我是绿色')
        })
        c.addEventListener('click', function () {
            alert('我是黑色')
        })
    </script>
</body>

</html>